<template>
	<view class="page_warpper bg">
		<ylNavbar :back="false" :langt="true"></ylNavbar>
		<view class="page_content">
			<image class="logo" src="@/src/static/login/login.png"></image>
			<view style="width: 100%;">
				<view>
					<uni-forms ref="form" style="padding: 20rpx 60rpx;">
						<view class="uni-form-item uni-column">
							<view class="title">{{$t('login.euid')}}</view>
							<input class="uni-input input_reset" v-model="form.uid" maxlength="100"
								:placeholder="$t('login.euidp')" />
						</view>
						<view class="uni-form-item uni-column" style="margin-bottom: 5rpx;">
							<view class="title"><text class="uni-form-item__title">{{$t('login.password')}}</text>
							</view>
							<view class="uni-input-wrapper">
								<input class="uni-input input_reset" :placeholder="$t('login.passwordp')"
									v-model="form.Password" :password="!showPassword" maxlength="20" />
								<uni-icons class="uni-icon" :type="showPassword?'eye-slash-filled':'eye-filled'"
									size="18" color="#c1c1c1" @click="changePassword"></uni-icons>
							</view>
						</view>
						<view class="uni-form-item uni-column" v-if="data.captchaEnabled">
							<view class="title"><text class="uni-form-item__title">{{$t('login.vercode')}}</text>
							</view>
							<view class="code_fa">
								<input v-model="form.codeImg" type="text" class="input input_reset input_code"
									:placeholder="$t('login.vercodep')" maxlength="4" />
								<view class="login-code input_img">
									<image :src="data.codeUrl" @click="getCode" class="login-code-img code-tu"></image>
								</view>
								<view style="clear: both;"></view>
							</view>
						</view>
						<view style="margin-top: 100rpx;font-size: 24rpx;line-height: 36rpx;color: white;">
							<uni-row class="demo-uni-row" style="width: 100%;margin-top: 20rpx;padding-bottom: 10px;">
								<uni-col :span="2">
									<checkbox @click="cheg" :checked="data.checked" color="#FFC327 "
										style="transform:scale(0.6)" />
								</uni-col>
								<uni-col :span="22">
									{{$t('login.reado')}}
									<span class="xy_sty" @click="open(3)">《{{$t('login.readupp1')}}》</span>
									<!-- <span>、</span> -->
									<span style="color:#FFC327;" @click="open(4)">《{{$t('login.readusa1')}}》</span>
									<!-- <span>、</span> -->
									<span style="color:#FFC327;" @click="open(5)">《{{$t('login.readrn1')}}》</span>
									<span>{{$t('login.readand')}}</span>
									<span style="color:#FFC327;" @click="open(6)">《{{$t('login.readbsn1')}}》</span>
								</uni-col>

							</uni-row>
						</view>
						<button form-type="submit" class="login_btn" :loading="data.isLoading"
							@click="loginNow">{{$t('login.login')}}</button>

						<view style="margin-top: 20rpx;">
							<uni-row class="demo-uni-row">
								<uni-col :span="12">
									<view class="demo-uni-col dark" style="color: #797B7F;" @click="findecode">
										{{$t('login.forgetp')}}
									</view>
								</uni-col>
								<uni-col :span="12">
									<view class="demo-uni-col light" style="color: #FFFFFF ;text-align: right;"
										@click="register">{{$t('login.signup')}}</view>
								</uni-col>
							</uni-row>
						</view>
					</uni-forms>
				</view>
			</view>

			<!-- #ifdef H5 -->
			<!-- <view class="app_link" @click="downloadApp">
				<uni-icons type="arrow-down" size="20" color="#B6F430" style="margin-top:4rpx;"></uni-icons>
				<span>{{$t('login.downloadApp')}}</span>
			</view> -->
			<!-- #endif -->
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		loginTradeUser
	} from "@/src/api/login.js"
	import {
		error
	} from "uview-plus";

	const form = ref({
		uid: "",
		Password: "",
		codeImg: "",
	})
	const data = reactive({
		isLoading: false,
		codeUrl: "@/static/login/login.png",
		captchaEnabled: true,
		captchaKey: "",
		showPress: true,
		progress: "",
		tipscontent: "",
		showClearIcon: false,
		inputClearValue: '',
		checked: false,

	})
	const showPassword = ref(Boolean)
	showPassword.value = false
	const loginNow = (() => {

	})

	const getCode = (() => {

	})

	const cheg = (() => {

	})
	const changePassword = (() => {
		showPassword.value = !showPassword.value

	})
	const open = (() => {

	})

	const findecode = (() => {

	})

	const register = (() => {

	})
</script>

<style lang="scss" scoped>
	.page_warpper {
		.page_content {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: white;

			.logo {
				height: 236rpx;
				width: 416rpx;
				margin-top: 100rpx;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 50rpx;
			}
		}
	}

	.input_reset {
		background-color: #171819;
		padding: 20rpx 20rpx;
		border-radius: 8rpx;
	}

	.uni-icon {
		position: absolute;
		right: 20rpx !important;
	}

	.code_fa {
		position: relative;
	}

	.input_code {
		font-size: 26rpx;
		position: absolute;
		width: 70%;
		left: 0;
	}

	.input_img {
		position: absolute;
		width: 28%;
		height: 56rpx;
		top: 10rpx;
		right: 0;
	}

	.code-tu {
		width: 70%;
		height: 100%;
		margin-left: 30%;
	}


	.xy_sty {
		color: #FFC327;
		margin: 0 10rpx
	}

	.login_btn {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		font-weight: 600;
		margin-top: 60rpx;
	}

	.app_link {
		width: 100%;
		padding: 30rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #B6F430;
	}

	.app_link .download {
		width: 28rpx;
		height: 28rpx;
		margin-right: 20rpx;
	}

	.langselect ::v-deep .uni-select__input-text {
		font-size: 28rpx;
		color: #fff;
	}
</style>